<script setup>
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue'

// 创建 axios 实例
const request = axios.create({
  baseURL: 'http://localhost:3001',
})

// 初始化数据
const list = ref([])

// 获取列表
const getList = async () => {
  // 获取请求
  const res = await request.get('/user')
  // 保存数据
  list.value = res.data
}

// 调用获取列表
getList()

// 删除业务
const delBtn = async (id) => {
  try {
    // 弹窗提示
    await ElMessageBox({
      type: 'warning',
      title: '温馨提示',
      message: '是否删除当前信息?',
      showCancelButton: true,
    })
    // 删除请求
    await request.delete(`/user/${id}`)
    // 调用获取列表
    getList()
  } catch (error) {
    // 取消不作处理
  }
}
</script>

<template>
  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button type="danger" @click="delBtn(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>
